
<!DOCTYPE html>
<ui:composition template="/template/layout.xhtml" xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://xmlns.jcp.org/jsf/core"
	xmlns:h="http://xmlns.jcp.org/jsf/html" xmlns:ui="http://xmlns.jcp.org/jsf/facelets" xmlns:p="http://primefaces.org/ui">

	<f:metadata>

		<f:viewAction action="#{emprestimoController.iniciarDados()}" />

	</f:metadata>

	<ui:define name="titulo">Empréstimo de Livros</ui:define>

	<ui:define name="breadcrumb">

		<ul class="breadcrumb">
			<li><a href="/biblioteca/paginas/principal.jsf">Início</a> <span class="divider">/</span></li>
			<li class="active">Empréstimo de Livros</li>
		</ul>

	</ui:define>

	<ui:define name="corpo">

		<h:form id="frm">

			<p:focus for="cdLivro" />

			<h3>Empréstimo de Livros</h3>

			<div class="row-fluid">

				<div class="span5">

					<div class="row-fluid">

						<div class="span12">

							<p:outputLabel value="Data Máxima para Devolução:" for="dataDevolucao" />

							<p:inputText id="dataDevolucao" title="Data Máxima para Devolução" readonly="true"
								value="#{emprestimoController.formulario.dataDevolucaoFormatada}" styleClass="input-small" />

						</div>

					</div>

					<div class="row-fluid">

						<div class="span12">

							<p:outputLabel value="Leitor: " for="nomeLeitor" />

							<p:inputText placeholder="Código" id="idLeitor" label="Código do Leitor" value="#{emprestimoController.formulario.entidade.leitor.id}" styleClass="input-mini"
								title="Informe o Código do Leitor">
								<p:ajax event="change" process="@this" partialSubmit="true" update="nomeLeitor" listener="#{emprestimoController.pesquisarLeitorPorId()}" />
							</p:inputText>

							<span />

							<p:autoComplete placeholder="Nome" queryDelay="500" label="Nome do Leitor" id="nomeLeitor" maxlength="60" title="Informe o Nome do Leitor"
								value="#{emprestimoController.formulario.entidade.leitor.nome}" maxResults="10" completeMethod="#{emprestimoController.pesquisarLeitores}">
								<p:ajax event="itemSelect" process="@this" partialSubmit="true" update="idLeitor" listener="#{emprestimoController.pesquisarLeitorPorNome()}" />
								<p:ajax event="change" process="@this" delay="1000" partialSubmit="true" update="idLeitor"
									listener="#{emprestimoController.pesquisarLeitorPorNome()}" />
							</p:autoComplete>

						</div>

					</div>

					<div class="row-fluid">

						<div class="span12">

							<p:outputLabel value="Livro: " for="nomeLivro" />

							<p:inputText title="Insira o Código do Livro" placeholder="Código" label="Código do Livro" id="cdLivro" value="#{emprestimoController.formulario.livro.codigo}"
								styleClass="input-mini">
								<p:ajax event="change" process="@this" partialSubmit="true" update="@form" listener="#{emprestimoController.pesquisarLivroPorCodigo()}" />
							</p:inputText>

							<span />

							<p:autoComplete title="Insira o Nome do Livro" label="Nome do Livro" placeholder="Nome do Livro" queryDelay="500" id="nomeLivro" maxlength="60"
								value="#{emprestimoController.formulario.livro.nome}" maxResults="10" completeMethod="#{emprestimoController.pesquisarLivros}">
								<p:ajax event="itemSelect" process="@this" partialSubmit="true" update="@form" listener="#{emprestimoController.pesquisarLivroPorNome()}" />
								<p:ajax event="change" process="@this" delay="1000" partialSubmit="true" update="@form"
									listener="#{emprestimoController.pesquisarLivroPorNome()}" />
							</p:autoComplete>

							<span />

							<p:commandButton id="btnAdicionar" value="Adicionar" immediate="true" process="@this" action="#{emprestimoController.adicionarLivro()}"
								styleClass="btn btn-mini" update="@form" style="margin-bottom: 8px;" title="Clique aqui para Adicionar o Livro a Lista"
								disabled="#{emprestimoController.formulario.livro.nome == null}" />

						</div>

					</div>
					
					<br/>

					<div class="row-fluid" style="margin-top: 8px;">

						<p:commandButton id="btnConcluir" value="Concluir Empréstimo" immediate="true" process="@this" title="Clique aqui para Concluir o Empréstimo"
							action="#{emprestimoController.salvarEmprestimo()}" styleClass="btn btn-primary" update="@form" />

						<p:spacer width="30" />
						<p:commandButton id="btnLimpar" immediate="true" update="@form" process="@this"
							value="Limpar" action="#{emprestimoController.iniciarDados()}" styleClass="btn btn-default" />

					</div>

				</div>

				<div class="span7" align="right">

					<h:panelGroup id="listaLivrosSelecionados">

						<div class="row-fluid bs-docs-example form-horizontal">

							<legend align="center">
								<h:outputText value="Lista de Livros" />
							</legend>

							<table class="table table-striped table-bordered table-hover table-condensed">

								<thead>

									<tr class="headerTable">

										<th><div align="center">
												<h:outputText value="Código" />
											</div></th>

										<th><div align="center">
												<h:outputText value="Descrição do Livro" />
											</div></th>

										<th><div align="center">
												<h:outputText value="Ações" />
											</div></th>

									</tr>

								</thead>

								<tbody>

									<ui:repeat var="item" value="#{emprestimoController.obterListaLivrosSelecionados()}" varStatus="status">

										<tr>

											<th><div align="center">
													<h:outputText value="#{item.codigo}" />
												</div></th>

											<th><h:outputText value="#{item.nome} - Autor(es) #{item.autores} - Editora #{item.editora}" /></th>

											<th><div align="center">
													<p:commandLink title="Clique aqui para Remover esse Item." process="@this" update="@form"
														action="#{emprestimoController.removerLivroAdicionado()}">
														<span class="icon-trash"></span>
														<f:setPropertyActionListener value="#{item}" target="#{emprestimoController.formulario.livro}" />
														<p:confirm header="Confirmação" message="Confirma a Remoção do Livro" icon="ui-icon-alert" />
													</p:commandLink>
													<p:confirmDialog global="true" showEffect="fade" hideEffect="fade">
														<center>
															<p:commandButton value="Sim" type="button" styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
															<p:commandButton value="Não" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
														</center>
													</p:confirmDialog>
												</div></th>
										</tr>

									</ui:repeat>

								</tbody>

							</table>

						</div>

						<h:panelGroup rendered="#{emprestimoController.listaLivrosSelecioadaEmpty}">

							<div align="left" style="margin-left: 10px; margin-top: -8px; margin-bottom: 8px;">

								<h:outputText value="Nenhum Livro adicionado!" />

							</div>

							<legend />

						</h:panelGroup>

					</h:panelGroup>

				</div>

			</div>

		</h:form>

	</ui:define>

</ui:composition>